<template>
  <div>
        <div>
          <div>
            <el-dialog title="订单信息"
                       style="text-align: center"
                       :visible.sync="dialogFormVisible"
                       :fullscreen = true>
              <el-dialog
                  width="30%"
                  title="填写物流信息"
                  style="text-align: center"
                  :visible.sync="innerVisible"
                  append-to-body>
                <div>
                  <el-input
                      placeholder="请填写物流单号"
                      onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                      v-model="lNumber"
                      style="width: 400px"
                      clearable>
                  </el-input>
                </div>
                <div style="margin-top: 15px">
                  <el-input
                      placeholder="请填写物流公司名称"
                      v-model="lName"
                      style="width: 400px"
                      clearable>
                  </el-input>
                </div>
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="confirm">确认</el-button>
                  <el-button @click="innerVisible = false">取消</el-button>
                </div>
              </el-dialog>
              <el-form >
                <div>
                  <el-descriptions class="margin-top" title="订单信息" :column="4" direction="vertical">
                    <el-descriptions-item label="订单编号">{{sId}}</el-descriptions-item>
                    <el-descriptions-item label="产品名称">{{bName}}</el-descriptions-item>
                    <el-descriptions-item label="数量">{{sNum}}</el-descriptions-item>
                    <el-descriptions-item label="总金额">{{sPrice}}</el-descriptions-item>
                    <el-descriptions-item label="订单状态">
                      <p v-if="sState == 0" >未投标</p>
                      <p v-if="sState == 1" >投标中</p>
                      <p v-if="sState == 2" >中标</p>
                      <p v-if="sState == 3" >未中标</p>
                      <p v-if="sState == 5" >发货中</p>
                      <p v-if="sState == 7" >退货中</p>
                      <p v-if="sState == 8" >已付款（成功）</p>
                      <p v-if="sState == 9" >已退货</p>
                      <p v-if="sState == 10" >删除</p>
                      </el-descriptions-item>
                    <el-descriptions-item label="日期">{{sStartDate}}</el-descriptions-item>
                  </el-descriptions>
                </div>
                <div style="text-align: center">
                  <p>产品详情</p>
                </div>
                <div style="padding-left: 180px">
                  <el-table
                      :data="tableData1"
                      border
                      style="width: 80%"
                      :row-class-name="tableRowClassName"
                      :default-sort = "{prop: 'sstate'}"
                  >
                    <el-table-column
                        fixed
                        prop="fkProduct"
                        label="产品编号"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="pname"
                        label="产品名"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="snum"
                        label="数量"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="sprice"
                        label="单价"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        label="状态"
                        width="300">
                      <template slot-scope="scope">
                        <p v-if="scope.row.sstate == 0" >未出库</p>
                        <p v-if="scope.row.sstate == 1" >已出库</p>
                        <p v-if="scope.row.sstate == 2" >已回库</p>
                        <p v-if="scope.row.sstate == 3" >已收货</p>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                      <template slot-scope="scope">
                        <el-button v-if="scope.row.sstate == 0" @click="shipGoods(scope.row)" type="text" size="small">发货</el-button>
                        <el-button v-if="scope.row.sstate == 1" @click="returnGoods(scope.row)" type="text" size="small">退货收货</el-button>
                        <el-button v-if="scope.row.sstate == 3" @click="receivePayment(scope.row)" type="text" size="small">收款</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-form>
<!--              <div slot="footer" class="dialog-footer">-->
<!--                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
<!--                <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--              </div>-->
            </el-dialog>
          </div>
          <div>
            <el-input
                placeholder="请输入订单编号"
                v-model="orderId"
                oninput="value=value.replace(/[^\d]/g,'')"
                style="width: 200px"
                clearable>
            </el-input>
            <el-input
                placeholder="请输入产品名称"
                v-model="productName"
                style="width: 200px"
                clearable>
            </el-input>
            <el-date-picker
                v-model="startDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
            >
            </el-date-picker>
              <el-button type="primary"
                         icon="el-icon-search"
                         @click="search"
              >搜索</el-button>
            <el-button type="primary"
                       @click="reset"
            >恢复默认</el-button>
          </div>
          <div>
            <el-table
                :data="tableData"
                style="width: 80%"
                height="600">
              <el-table-column
                  fixed
                  prop="sid"
                  label="订单编号"
                  width="150">
              </el-table-column>
              <el-table-column
                  prop="bname"
                  label="产品名称"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="snum"
                  label="数量"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="sprice"
                  label="总金额"
                  width="120">
              </el-table-column>
              <el-table-column
                  label="订单状态"
                  width="120">
                <template slot-scope="scope">
                  <p v-if="scope.row.sstate == 0" >未投标</p>
                  <p v-if="scope.row.sstate == 1" >投标中</p>
                  <p v-if="scope.row.sstate == 2" >中标</p>
                  <p v-if="scope.row.sstate == 3" >未中标</p>
                  <p v-if="scope.row.sstate == 5" >发货中</p>
                  <p v-if="scope.row.sstate == 7" >退货中</p>
                  <p v-if="scope.row.sstate == 8" >已付款（成功）</p>
                  <p v-if="scope.row.sstate == 9" >已退货</p>
                  <p v-if="scope.row.sstate == 10" >删除</p>
                </template>
              </el-table-column>
              <el-table-column
                  prop="sstartDate"
                  label="开始日期"
                  width="120">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
<!--            <div>-->
<!--              <el-button  @click="dialogFormVisible = true" type="text" size="small">查看</el-button>-->
<!--            </div>-->
          </div>
        </div>

  </div>

</template>

<script>
import Navigation from "@/components/Navigation";
import HeaderMenu from "@/components/HeaderMenu";
export default {
  name: "order",

  data(){
    return{
      tableData:[],
      sId:"",
      sNum:"",
      fkSupplierId:"",
      sState:"",
      sPrice:"",
      fkBiddingId:"",
      bName:"",
      sStartDate:"",
      dialogFormVisible:false,
      tableData1:"",
      //供应商ID
      supplierId:"",
      //输入框
      orderId:"",
      productName:"",
      startDate:"",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      //物流
      lNumber:"",
      lName:"",
      sSaleProductId:"",
      innerVisible:false,
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      console.log(22222222222)
      //获取供应商Id
      this.supplierId = localStorage.getItem("supplierId")
      this.$axios.get("api/sales-order/order25/" + this.supplierId).then(
          r=>{
            console.log(r.data)
            this.tableData = r.data
            console.log(1111111111111111)

          }
      )
    },
    reset(){
      this.init();
    },
    //点击产看
    handleClick(row){
      this.sId = row.sid
      this.sNum = row.snum
      this.fkSupplierId = row.fkSupplierId
      this.sState = row.sstate
      this.sPrice = row.sprice
      this.fkBiddingId = row.fkBiddingId
      this.bName = row.bname
      this.sStartDate = row.sstartDate
      this.initProduct()
      this.dialogFormVisible = true
    },
    initProduct(){
      this.$axios.get("api/sales-order/SaleProductInfo/"+this.sId).then(
          r=>{
            this.tableData1 = r.data
          }
      )
    },
    tableRowClassName({row, rowIndex}) {
      if (row.sstate == 0) {
        return 'warning-row';
      } else if (row.sstate == 1) {
        return 'success-row';
      }
      return '';
    },
    search(){
      let f = new FormData()
      f.append("supId",this.supplierId )
      f.append("orderId",this.orderId )
      f.append("bName",this.productName )
      f.append("startDate",this.startDate )
      this.$axios.post("api/sales-order/orderInfo",f).then(
          r=>{
              this.tableData = r.data
          }
      )
    },
    //发货按钮
    shipGoods(row){
      this.sSaleProductId = row.ssaleProductId
      this.innerVisible = true
    },
    confirm(){
      if(this.lNumber == ""){
        this.$message.warning("物流单号不能为空！")
        return;
      }
      if(this.lName == ""){
        this.$message.warning("物流公司不能为空！")
        return;
      }
      let f = new FormData()
      f.append("sId",this.sId )
      f.append("fkSaleProductId",this.sSaleProductId)
      f.append("lNumber",this.lNumber)
      f.append("lName",this.lName)
      this.$axios.post("api/shipGoods",f).then(
          r=>{
            this.$message.info(r.data.message)
            this.innerVisible = false
            this.initProduct()
          }
      )

    },
    receivePayment(row){
      this.$router.push("Finance")
    },
    returnGoods(row){
      console.log("退货")
      let f = new FormData()
      f.append("sSaleProductId",row.ssaleProductId)
      this.$axios.put("api/supplierReceiptGoods",f).then(
          r=>{
            this.$message.info(r.data.message)
          }
      )
    }



  },
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>